﻿<!doctype html>
<html>

<head>
    <title>SpreadJS - Background</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>
    <style type="text/css">
    /*css_begin*/
        input[type="button"] {
            width: 180px;
        }

        input[type="text"] {
            width: 70px;
        }

        label {
            display: inline-block;
            width: 74px;
        }

        .wide-label {
            width: 260px;
        }

        input.narrow-button {
            width: 74px;
        }
    /*css_end*/
    </style>
    <script type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
        initSpread(spread);
    });

    function initSpread(spread) {
        var spreadNS = GcSpread.Sheets;
        var sheet = spread.getSheet(0);
        var pictureUrl = "";
        spread.isPaintSuspended(true);
        sheet.setRowCount(15);
        sheet.setColumnCount(8);
        spread.backColor("white");
        spread.grayAreaBackColor("gray");
        spread.backgroundImageLayout(spreadNS.ImageLayout.Stretch);
        spread.backgroundImage("images/back.PNG");

        spread.isPaintSuspended(false);

        $("#layout").change(function () {
            var layout = parseInt($("#layout").val());
            spread.backgroundImageLayout(layout);
        });

        $("#setGrayAreaBackColor").click(function () {
            var color = $("#grayAreaBackColor").val();
            spread.grayAreaBackColor(color);
        });
        $("#setSpreadBackColor").click(function () {
            var color = $("#spreadBackColor").val();
            spread.backColor(color);
        });
        $("#file_input").bind('change', function() {
            var file = this.files[0];
            if (!/image\/\w+/.test(file.type)) {
                alert("The file muse be image!");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                pictureUrl = this.result;
            }
        });
        $("#setSpreadBackgroundImage").click(function () {
            spread.backgroundImage(pictureUrl);
        });
        $("#delSpreadBackgroundImage").click(function () {
            spread.backgroundImage("");
        });
    };
    /*code_end*/
    </script>
</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:340px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input type="text" id="grayAreaBackColor"/>
                <input type="button" id="setGrayAreaBackColor" value="Set Gray Area BackColor"/>
            </div>
            <div class="option-row">
                <input type="text" id="spreadBackColor"/>
                <input type="button" id="setSpreadBackColor" value="Set Spread BackColor"/>
            </div>
            <div class="option-row">
                <label>Image:</label>
                <input type="file" name="image" id="file_input" />
                
            </div>
            <div class="option-row">
                <label class="wide-label">Spread Background Image Layout:</label>
                <select id="layout" >
                    <option value="0" selected="selected">Stretch</option>
                    <option value="1">Center</option>
                    <option value="2">Zoom</option>
                    <option value="3">None</option>
                </select>
            </div>
            <div class="option-row">
                <input type="button" id="setSpreadBackgroundImage" value="Set" class="narrow-button" />
                <input type="button" id="delSpreadBackgroundImage" value="Del Background Image" />
            </div>
        </div>
    </div>
</body>
</html>
